<template>
    <div>
        <header class="head">
            <span class="iconfont icon-icon-arrow-left4" @click="jump_index()"></span>
            <input type="text" placeholder="在轻芒里搜索并订阅">
        </header>
        <!-- <ul class="nav">
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
            <li>先锋读者晒单</li>
        </ul> -->
        <h4 class="title_one">方可成：新闻传播</h4>

        <ul class="dingyue" v-if="this.$store.state.findx.new_findinfo.length !== 0 ">
            <!-- <p v-if="this.$store.state.findx.new_findinfo.length == 0 ">请等待...</p> -->
            <FindLi  v-for="(item) in this.$store.state.findx.new_findinfo"  :Key="item.id" :faceimg="item.faceimg" :title="item.title" :people="item.people" :status="item.status"></FindLi>        
        </ul>
        <Icon>
            <span slot="list" class="icon_add" @click="add()">{{spaninfo}}</span>
        </Icon>
        <div class="find_tu" ref="picture">
            <img src="images/find-tu.png" alt="加载错误" v-show="bool"  >
        </div>
    </div>
</template>

<script>
import FindLi from "@/components/find_li.vue"
import Icon from "@/components/all_iconlist.vue"
export default {
    data(){
        return{
            spaninfo:"+",
            bool:0
        }
    },
    components:{
        FindLi,
        Icon
    },
    methods:{
        add(){
            if(this.spaninfo == "+"){
                this.spaninfo = "×"
                this.bool=1
                this.$refs.picture.style.opacity=1
                
            }
            else{
                this.spaninfo = "+"
                this.bool=0
                this.$refs.picture.style.opacity=0
            }
        },
        jump_index(){
            this.$router.push("/index")
        }
    },
    mounted(){
        this.$store.dispatch("findinfo")
        console.log(this.$store.state.findx.new_find_info)
    }
}
</script>

<style scoped>
.head{
    box-sizing: border-box;
    padding: 0 .08rem;
    position: relative;
}
.head input{
    width: 100%;
    height: .35rem;
    box-shadow: 5px 4px 15px 2px #eceaea;
    border: 2px solid #e3e3e3;
    text-indent:.34rem;
    margin: .15rem 0;
}
.icon-icon-arrow-left4{
    position: absolute;
    top: .28rem;
    left: .2rem;
}
.icon-tianjia{
    display: inline-block;
    width: .15rem;
    height: .15rem;
}
.nav{
    margin-left: .1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
}
.nav li{
    text-align: center;
    padding: .1rem;
    border-radius: .18rem;
    background: #dddddd;
    color: #272727;
    margin: 0 .06rem .04rem;
    flex-shrink: 0;
}
.dingyue{
    margin-bottom: .7rem
}
h4.title_one{
    font-size: .14rem;
    margin: .2rem 0.15rem;
}
.icon_add{
    display: inline-block;
    width: .4rem;
    line-height: .4rem;
    text-align: center;
    color: #ffffff;
    font-size: .3rem;
    font-weight: 100;
}
.find_tu{
    opacity: 0;
    transition: .5s;

}
.find_tu img{
    width:.35rem;
    position:fixed;
    bottom: .67rem;
    right: .23rem;

}
</style>